TOPIC OVERVIEW

javascript/Web Workers

Running real JavaScript in parallel, without touching the DOM.

10 QuestionsAdvancedMedium Priority ~12 min read

A Web Worker runs a JavaScript file on its own thread, completely separate from the main thread that handles your UI. That separation is the whole point: heavy computation (image processing, large data parsing, complex calculations) can run on a worker without ever blocking the main thread, which is what keeps the UI responsive during expensive work. The tradeoff is isolation — a worker has no access to the DOM, window, or the variables in your main script.

Workers and the main thread communicate exclusively by passing messages through postMessage(), and the data sent is copied via the structured clone algorithm by default — not shared by reference. For large binary data like an ArrayBuffer, you can use transferable objects instead, which move ownership to the worker without copying, at the cost of the original thread losing access to that data. Dedicated workers belong to one script; SharedWorkers can be accessed by multiple scripts or tabs from the same origin.

What you'll walk away knowing

Why workers exist — moving expensive computation off the main thread to keep the UI responsive

What a worker can and can't access (no DOM, no window, separate global scope)

How postMessage and structured cloning work, and how that differs from transferable objects

The difference between a dedicated Worker and a SharedWorker

1What is a Web Worker and why do we need it? What problem does it solve in the browser?ExpertHigh 2What are the three types of Web Workers? How do they differ from each other?ExpertHigh 3How do you create a Web Worker and communicate with it?ExpertHigh 4What is the postMessage / onmessage pattern? Is communication synchronous or asynchronous?ExpertHigh 5What APIs and features are not available inside a Web Worker? (e.g., DOM, window, document)ExpertHigh 6What is the Structured Clone Algorithm? How is it different from JSON serialization? What types can and cannot be cloned?ExpertHigh 7What are Transferable Objects? How does transferring an ArrayBuffer differ from cloning it, and why does it matter for performance?ExpertHigh 8How do you handle errors inside a Web Worker? What events are available and what information do they expose?ExpertHigh 9What is a Shared Worker? How can multiple browser tabs communicate through one? What are its limitations?ExpertHigh 10How do you terminate a Web Worker? What's the difference between worker.terminate() and self.close()?ExpertHigh 11How would you architect a thread pool using Web Workers to process a large task queue efficiently?ExpertHigh 12What is SharedArrayBuffer and Atomics? How do they enable true shared memory between the main thread and workers? What security headers are required to use them?ExpertHigh 13What are the performance trade-offs of using Web Workers? When can they actually hurt performance (e.g., small tasks, frequent postMessage calls)?ExpertHigh 14How would you use Web Workers with WebAssembly (WASM) for CPU-intensive tasks? What makes this combination powerful?ExpertHigh 15How do Module Workers work (type: 'module')? What advantages do they offer over classic workers?ExpertHigh 16In a React or Vue app, how would you integrate a Web Worker cleanly without breaking the component lifecycle? Have you used libraries like comlink — how does it simplify the worker communication model?ExpertHigh 17What is the lifecycle of a Service Worker (install → activate → fetch)? How do you handle cache versioning and old worker cleanup?ExpertHigh 18What is the difference between cache.put(), cache.add(), and cache.addAll()? How do you implement a cache-first vs network-first strategy?ExpertHigh 19How do you communicate between a Service Worker and the main thread? What is the role of BroadcastChannel vs postMessage here?ExpertHigh 20Can Web Workers access localStorage?ExpertHigh

All Topics